<!--
 * @Author: dengyl
 * @Date: 2022-01-19 14:01:08
 * @LastEditTime: 2022-08-11 15:16:43
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 新闻-多图滚动
 * @FilePath: \code\ctp-static-portal-front\src\components\news\components\roll.vue
-->
<template>
  <div
    class="roll yuanyuan"
    :style="{
      background: options.backgroundColor
    }"
    ref="roll"
  >
    <div
      class="roll-wrapper"
      :style="{
        width: marqueeWrapperWidth,
        animation,
        left: `-${scrollLeft}px`
      }"
      @mouseout="isPaused = false"
      @mouseover="isPaused = true"
    >
      <div class="image-view" v-for="(list, i) in dataList" :key="i" :class="[imageStyle]">
        <a
          v-for="(item, index) in list"
          :key="index"
          :href="`${newsBasePath}${item.link}`"
          target="_blank"
          :title="item.subject"
        >
          <ShowImg :item="item" />
          <div class="title">
            <span>{{ item.subject }}</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import { data } from '@/utils';
  import { image } from '@/mixins';
  const IMAGE_SIZE = 345 + 20; // 图片尺寸 加上20  实现无缝滚动
  const INTERVAL_SPEED = 30;
  export default {
    name: 'Roll',
    mixins: [image],
    props: {
      list: { type: Array },
      options: { type: Object },
      contentWidth: { type: Number }
    },
    data() {
      return {
        newsBasePath: `${_basePath}/`,
        dataList: [],
        //设置动画展示
        animation: '',
        //容器宽度
        marqueeWrapperWidth: 'auto',
        //左偏移值。IE8\9用
        scrollLeft: 0,
        //定时器。IE8\9用
        intervalId: 0,
        //是否暂停。IE8\9用
        isPaused: false
      };
    },
    created() {
      //判断是否需要滚动
      const length = this.list.length;
      if (Math.floor(this.contentWidth / IMAGE_SIZE) < length) {
        //设置容器的宽度
        const width = length * IMAGE_SIZE;
        this.marqueeWrapperWidth = `${width * 2}px`;
        const [speed, speedIE] = this.getPlaySpeed();
        if (data.isIE8 || data.isIE9) {
          //ie8\9走IE的滚动方式
          this.intervalId = setInterval(() => {
            this.beginScroll(speedIE, width);
          }, INTERVAL_SPEED);
        } else {
          this.animation = `marquee ${parseInt(width / speed)}s linear infinite`;
        }
        this.dataList.push(this.list);
      }
        this.dataList.push(this.list);
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
    },
    methods: {
      getPlaySpeed() {
        switch (this.options.speed) {
          case 'speed1':
            return [180, 6];
          case 'speed3':
            return [60, 2];
          default:
            return [120, 4];
        }
      },
      /**
       * @description: IE滚动。直接A82抄过来
       * @param {Number} speed速度
       * @param {Number} width一个滚动块的宽度
       * @return {*}
       */
      beginScroll(speed, width) {
        if (this.isPaused) return;
        if (this.scrollLeft >= width) {
          this.scrollLeft = 0;
        } else {
          this.scrollLeft += speed;
        }
      }
    }
  };
</script>
<style>
  @keyframes marquee {
    form {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  /* Plugin CSS */
  .str_wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
  }

  .str_move {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    cursor: move;
  }

  .str_move_clone {
    position: absolute;
    top: 0;
    left: 100%;
    display: inline-block;
    display: inline;
    vertical-align: top;
    zoom: 1;
  }

  .str_vertical .str_move_clone {
    top: 100%;
    left: 0;
  }

  .str_down .str_move_clone {
    bottom: 100%;
    left: 0;
  }

  .str_vertical .str_move,
  .str_down .str_move {
    width: 100%;
    white-space: normal;
  }
</style>
<style lang="scss" scoped>
  .roll {
    overflow: hidden;

    > .roll-wrapper {
      position: relative;
      overflow: hidden;

      &:hover {
        animation-play-state: paused !important;
      }

      > .image-view {
        float: left;
        margin: 0 auto;
        // display: flex;
        a {
          position: relative;
          display: inline-block;
          width: 225px;
          height: 150px;
          margin-right: 20px;
          line-height: 150px;
          flex-shrink: 0;
          > .title {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 35px;
            overflow: hidden;
            line-height: 35px;
            color: #fff;
            text-indent: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: rgba(0, 0, 0, 0.4);
            filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
          }
        }
      }
    }
  }
</style>
